/*
 * @param {String} dom - 引用信息 ref，标识转盘元素
 * @param {String} width - 转盘宽度，仅支持 rpx 或 px
 * @param {String} height - 转盘高度，仅支持 rpx 或 px
 * @param {Array} prizes - 奖品项，设置奖品名、奖品图片、奖品格背景色
 * @param {Object} defaultConfig - 设置初始转盘指针偏移度
 * @param {Object} defaultStyle - 设置奖项名字体颜色与字号
 * @param {Array} blocks - 设置转盘底盘内边距与背景颜色，不支持图片
 * @param {Array} buttons - 抽奖按钮配置，按钮内外层背景与圆角样式、指针颜色、按钮背景颜色、抽奖按钮图片等
 * @param {Boolean} open - 是否禁止抽奖
 * @param {Object} faimsg - 禁止抽奖提示框
 * @param {Number} timer - 抽奖时转盘旋转时间(不算停滞时间)，单位 ms
 * @param {Number} index - 中奖索引，即奖品项 prizes 数组下标，可根据接口返回或自定义决定奖品
 */


/*
 * @start - 开启转盘（抽奖中），默认处理转盘的开启与停止，可加入其他动作
 * @end - 停止转盘（抽奖完成），获得结果，可加入其他动作
 * @prohibit - 禁止抽奖，默认弹出提示框，可加入其他动作
 */

<template>
	<view>
		<turntable
		:ref="dom"
		:width="width"
		:height="height"
		:prizes="prizesx"
		:defaultConfig="defaultConfig"
		:default-style="defaultStyle"
		:blocks="blocks"
		:buttons="buttons"
		@start="startCallBack"
		@end="endCallBack"
		/>
	</view>
</template>


<script>
import turntable from '../../libs/prize/turntable/turntable.vue'
export default {
	
	name: 'u-turntable',
	components: { turntable },
	data() {
		return {
			// 奖品
			prizesx: []
		}
	},
	
	props: {
		
		dom: {//引用信息 ref，标识转盘元素
			type: String,
			default: ''
		},
		
		width: {//转盘宽度，仅支持 rpx 或 px
			type: String,
			default: '600rpx'
		},
		
		height: {//转盘高度，仅支持 rpx 或 px
			type: String,
			default: '600rpx'
		},
		
		prizes: {//奖品项，设置奖品名、奖品图片、奖品格背景色
			type: Array
		},
		
		defaultConfig: {//设置初始转盘指针偏移度
			type: Object
		},
		
		defaultStyle: {//设置奖项名字体与字号
			type: Object
		},
		
		blocks: {//设置转盘底盘内边距与背景颜色，不支持图片
			type: Array
		},
		
		buttons: {//抽奖按钮配置，按钮内外层背景与圆角样式、指针颜色、按钮背景颜色、抽奖按钮图片等
			type: Array
		},
		
		open: {//是否禁止抽奖
			type: Boolean,
			default: false
		},
		
		faimsg: {//禁止抽奖提示框
			type: Object
		},
		
		timer: {//抽奖时转盘旋转时间，单位 ms
			type: Number,
			default: 1000
		},
		
		index: {//中奖索引，即奖品项 prizes 数组下标，可根据接口返回或自定义决定奖品
			type: Number,
			default: 0
		}
		
	},
	
	 mounted () {
		 
		// 初始化转盘
	    this.getPrizesList()
		
	},

	
	methods: {
		
		
		/*
		 * 初始化转盘
		 * @return void
		 */
		getPrizesList: function()
		{
	     const prizes = []
		 this.prizes.forEach((item, index) => {
	        prizes.push({
	          title: item.name,
			  // 也可通过奇偶数来赋值背景颜色
	          // background: index % 2 ? '#f9e3bb' : '#f8d384',
	          background: item.color,
	          fonts: [{ text: item.name, top: '10%' }],
	          imgs:[{ src: item.img, width: '30%', top: '35%' }],
	        }) 
	      })
		  
	      this.prizesx = prizes
	    },
		
		
		
		/*
		 * 启动转盘
		 * @return void
		 */
	    startCallBack: function()
		{
			// 可抽奖
			if(this.open){
				
				// 启动转盘
				this.$refs[this.dom].play()
				setTimeout(() => {
					
					// stop(index)
					// 决定中奖奖品
					this.$refs[this.dom].stop(this.index)
				}, this.timer)
				// 预计何时结束旋转(完成抽奖)
				// 数字越大越慢 
				
				// 暴露
				this.$emit('start')
			}
			
			// 不可抽奖
			if(!this.open){
				uni.showModal(this.faimsg)
				this.$emit('prohibit')
			}
	    },
		
		
		/*
		 * 结束抽奖
		 * 抽奖结果
		 * @return void
		 */
	    endCallBack: function(prize)
		{
			this.$emit('end', prize)
	    },

	}
	
}
</script>

<style lang="scss">
	
</style>